<template>
  <div class="dashboard-container">

    <div class="dashboard-editor-container" v-loading="loading">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span>今日</span>
        </div>
        <el-row :gutter="40" class="panel-group">
          <el-col :span="6" class="card-panel-col">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-message">
                <i class="el-icon-postcard" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">普通访客预约</div>
                <span class="card-panel-num">{{todayStatisticsData.todayNormalCount}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="6" class="card-panel-col">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-message">
                <i class="el-icon-user" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">普通访客人数</div>
                <span class="card-panel-num">{{todayStatisticsData.todayNormalPersonCount}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="6" class="card-panel-col">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-message">
                <i class="el-icon-truck" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">普通访客车辆</div>
                <span class="card-panel-num">{{todayStatisticsData.todayNormalCarCount}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="6" class="card-panel-col">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-money">
                <i class="el-icon-truck" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">临时车辆预约</div>
                <span class="card-panel-num">{{todayStatisticsData.todayTempCarCount}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="6" class="card-panel-col">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-shopping">
                <i class="el-icon-s-order" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">团体访客预约</div>
                <span class="card-panel-num">{{todayStatisticsData.todayGroupCount}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="6" class="card-panel-col">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-shopping">
                <i class="el-icon-user-solid" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">团体访客人数</div>
                <span class="card-panel-num">{{todayStatisticsData.todayGroupPersonCount}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="6" class="card-panel-col">
            <div class="card-panel">
              <div class="card-panel-icon-wrapper icon-shopping">
                <i class="el-icon-truck" />
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">团体访客车辆</div>
                <span class="card-panel-num">{{todayStatisticsData.todayGroupCarCount}}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <div class="dashboard-editor-container" v-loading="loading">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span>访客统计分析</span>
          <!--
          <el-button style="float: right; padding: 3px 0" type="text">统计分析</el-button>
          -->
        </div>
        <el-row :gutter="40" class="panel-group">
          <el-col :span="12">
            <el-row :gutter="40">
              <el-col :span="24" class="card-panel-col">
                <div class="card-panel">
                  <div class="card-panel-icon-wrapper icon-message">
                    <i class="el-icon-postcard" />
                  </div>
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      普通访客累计申请
                    </div>
                    <span class="card-panel-num">{{visitorStatisticsData.accumulateNormalCount}}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" class="card-panel-col">
                <div class="card-panel">
                  <div class="card-panel-icon-wrapper icon-shopping">
                    <i class="el-icon-user" />
                  </div>
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      普通访客累计人次
                    </div>
                    <span class="card-panel-num">{{visitorStatisticsData.accumulateNormalPersonCount}}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" class="card-panel-col">
                <div class="card-panel">
                  <div class="card-panel-icon-wrapper icon-money">
                    <i class="el-icon-truck" />
                  </div>
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      普通访客累计车次
                    </div>
                    <span class="card-panel-num">{{visitorStatisticsData.accumulateNormalCarCount}}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="24" class="card-panel-col">
                <div class="card-panel">
                  <div class="card-panel-icon-wrapper icon-message">
                    <i class="el-icon-s-order" />
                  </div>
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      团体访客累计申请
                    </div>
                    <span class="card-panel-num">{{visitorStatisticsData.accumulateGroupCount}}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" class="card-panel-col">
                <div class="card-panel">
                  <div class="card-panel-icon-wrapper icon-shopping">
                    <i class="el-icon-user-solid" />
                  </div>
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      团体访客累计人次
                    </div>
                    <span class="card-panel-num">{{visitorStatisticsData.accumulateGroupPersonCount}}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" class="card-panel-col">
                <div class="card-panel">
                  <div class="card-panel-icon-wrapper icon-money">
                    <i class="el-icon-truck" />
                  </div>
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      团体访客累计车次
                    </div>
                    <span class="card-panel-num">{{visitorStatisticsData.accumulateGroupCarCount}}</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <div style="width: 100%; height: 14rem;" id="visitChart"></div>
            <div style="width: 100%; height: 14rem;margin-top: 2rem;" id="visitPersonChart"></div>
            <div style="width: 100%; height: 14rem;margin-top: 2rem;" id="visitVehicleChart"></div>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <div class="dashboard-editor-container" v-loading="loading">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span>车辆管理</span>
          <!--
          <el-button style="float: right; padding: 3px 0" type="text">统计分析</el-button>
          -->
        </div>
        <el-row :gutter="40" class="panel-group">
          <el-row :gutter="40">
            <el-col :span="12">
              <el-row :gutter="40">
                <el-col :span="12" class="card-panel-col">
                  <div class="card-panel">
                    <div class="card-panel-icon-wrapper icon-message">
                      <i class="el-icon-truck" />
                    </div>
                    <div class="card-panel-description">
                      <div class="card-panel-text">
                        长期车辆总数
                      </div>
                      <span class="card-panel-num">{{vehicleStatisticsData.longCarCount}}</span>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12" class="card-panel-col">
                  <div class="card-panel">
                    <div class="card-panel-icon-wrapper icon-message">
                      <i class="el-icon-truck" />
                    </div>
                    <div class="card-panel-description">
                      <div class="card-panel-text">
                        场内长期车
                      </div>
                      <span class="card-panel-num">{{vehicleStatisticsData.inLongCarCount}}</span>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12" class="card-panel-col">
                  <div class="card-panel">
                    <div class="card-panel-icon-wrapper icon-money">
                      <i class="el-icon-truck" />
                    </div>
                    <div class="card-panel-description">
                      <div class="card-panel-text">
                        累计临时车
                      </div>
                      <span class="card-panel-num">{{vehicleStatisticsData.consCarCount}}</span>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12" class="card-panel-col">
                  <div class="card-panel">
                    <div class="card-panel-icon-wrapper icon-shopping">
                      <i class="el-icon-postcard" />
                    </div>
                    <div class="card-panel-description">
                      <div class="card-panel-text">
                        场内临时车
                      </div>
                      <span class="card-panel-num">{{vehicleStatisticsData.inConsCarCount}}</span>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row>
                <el-col :span="24">
                  <div style="width: 100%; height: 16rem;" id="tempVehicleChart"></div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import BarChart from './components/BarChart'
import PieChart from './components/PieChart'
import RaddarChart from './components/RaddarChart'
import {vehicleStatistics,visitorStatistics,statisticsTempVehicleIncrease, todayStatistics, visitIncrease, visitPersonIncrease,visitVehicleIncrease} from '@/api/dashboard'
import echarts from 'echarts'

export default {
  name: 'Dashboard',
  components: {
    BarChart,
    PieChart,
    RaddarChart
  },
  data() {
    return {
      loading: false,
      statisticsTempVehicleIncrease: [],
      statisticsVisitIncrease: [],
      statisticsVisitPersonIncrease: [],
      statisticsVisitVehicleIncrease: [],
      // 今日数据
      todayStatisticsData: {
        todayTempCarCount: 0,
        todayNormalCount: 0,
        todayNormalPersonCount: 0,
        todayNormalCarCount: 0,
        todayGroupCount: 0,
        todayGroupPersonCount: 0,
        todayGroupCarCount: 0
      },
      vehicleStatisticsData: {
        consCarCount: 0,
        inConsCarCount: 0,
        inLongCarCount: 0,
        longCarCount: 0,
        toDayConsCarCount: 0
      },
      visitorStatisticsData: {
        // 普通访客累计预约单数
        accumulateNormalCount: 0,
        // 普通访客累计人次
        accumulateNormalPersonCount: 0,
        // 普通访客累计车次
        accumulateNormalCarCount: 0,
        // 团体访客累计预约单数
        accumulateGroupCount: 0,
        // 团体访客累计人次
        accumulateGroupPersonCount: 0,
        // 团体访客累计车次
        accumulateGroupCarCount: 0,
      },
      visitChart: null,
      visitPersonChart: null,
      visitVehicleChart: null
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    this.getVehicleStatistics()
    this.getVistorStatistics()
    this.getTodayData()
    this.getTempVehicleStatistics(2)
    this.getVisitStatistics(2)
    this.getVisitPersonStatistics(2)
    this.getVisitVehicleStatistics(2)
  },
  methods: {
    getTodayData() {
      this.loading = true
      todayStatistics().then(response => {
        if (response.code === 200) {
          this.todayStatisticsData = response.data
        } else {
          this.$message.error(response.msg)
        }
        this.loading = false
      })
    },
    getTempVehicleStatistics(sumBy) {
      this.loading = true
      statisticsTempVehicleIncrease(sumBy).then(response => {
        if (response.code === 200) {
          this.statisticsTempVehicleIncrease = response.data
          this.initTempVehicleCharts()
        } else {
          this.$message.error(response.msg)
        }
        this.loading = false
      })
    },
    getVisitStatistics(sumBy) {
      this.loading = true
      visitIncrease(sumBy).then(response => {
        if (response.code === 200) {
          this.statisticsVisitIncrease = response.data
          this.initVisitCharts()
        } else {
          this.$message.error(response.msg)
        }
        this.loading = false
      })
    },
    getVisitPersonStatistics(sumBy) {
      this.loading = true
      visitPersonIncrease(sumBy).then(response => {
        if (response.code === 200) {
          this.statisticsVisitPersonIncrease = response.data
          this.initVisitPersonCharts()
        } else {
          this.$message.error(response.msg)
        }
        this.loading = false
      })
    },
    getVisitVehicleStatistics(sumBy) {
      this.loading = true
      visitVehicleIncrease(sumBy).then(response => {
        if (response.code === 200) {
          this.statisticsVisitVehicleIncrease = response.data
          this.initVisitVehicleCharts()
        } else {
          this.$message.error(response.msg)
        }
        this.loading = false
      })
    },
    initVisitCharts() {
      let valueArray1 = []
      let valueArray2 = []
      let xLabels = []
      for (let i = 0; i < this.statisticsVisitIncrease.length; i++) {
        xLabels.push(this.statisticsVisitIncrease[i].label)
        valueArray1.push(this.statisticsVisitIncrease[i].normalValue)
        valueArray2.push(this.statisticsVisitIncrease[i].groupValue)
      }
      let option1 = {
        title: {
          text: '访客申请增长情况',
          subtext: '',
          left: 'center'
        },
        legend: {
          data: ['普通', '团体']
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: 16
          },
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        xAxis: [
          {
            type: 'category',
            data: xLabels,
            axisLabel: {
              fontSize: 16,
              color: '#afafaf',
            },
            axisPointer: {
              type: 'shadow',
            },
            nameTextStyle: {
              fontWeight: 600,
              fontSize: 16
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff', // 左边线的颜色
                width: '3', // 坐标线的宽度
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '普通',
            axisLabel: {
              formatter: '{value} ',
              fontSize: 16,
              color: '#afafaf',
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff', // 左边线的颜色
                width: '3', // 坐标线的宽度
              },
            },
            nameTextStyle: {
              fontWeight: 600,
              fontSize: 16
            },
          },
          {
            type: 'value',
            name: '团体',
            fontSize: 16,
            axisLabel: {
              formatter: '{value}',
              fontSize: 12,
              color: '#afafaf',
            },
            axisLine: {
              lineStyle: {
                color: '#fff',
                width: 2 // 这里是为了突出显示加上的
              }
            },
            nameTextStyle: {
              fontWeight: 600,
              fontSize: 16
            }
          },
        ],
        series: [
          {
            name: '散客',
            type: 'line',
            yAxisIndex: 0,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(64,255,160,0.2)'
                }, {
                  offset: 1,
                  color: '#40ffa088'
                }])
              }
            },
            data: valueArray1
          },
          {
            name: '团体',
            type: 'line',
            yAxisIndex: 1,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(88,255,255,0.2)'
                }, {
                  offset: 1,
                  color: 'rgba(52,167,232,1)'
                }]),
              }
            },
            data: valueArray2
          }
        ],
      };
      if(!this.visitChart) {
        this.visitChart = echarts.init(document.getElementById('visitChart'))
      }
      this.visitChart.setOption(option1)
    },
    initVisitPersonCharts() {
      let valueArray1 = []
      let valueArray2 = []
      let xLabels = []
      for (let i = 0; i < this.statisticsVisitPersonIncrease.length; i++) {
        xLabels.push(this.statisticsVisitPersonIncrease[i].label)
        valueArray1.push(this.statisticsVisitPersonIncrease[i].normalValue)
        valueArray2.push(this.statisticsVisitPersonIncrease[i].groupValue)
      }
      let option1 = {
        title: {
          text: '访客人数增长情况',
          subtext: '',
          left: 'center'
        },
        legend: {
          data: ['普通', '团体']
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: 16
          },
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        xAxis: [
          {
            type: 'category',
            data: xLabels,
            axisLabel: {
              fontSize: 16,
              color: '#afafaf',
            },
            axisPointer: {
              type: 'shadow',
            },
            nameTextStyle: {
              fontWeight: 600,
              fontSize: 16
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff', // 左边线的颜色
                width: '3', // 坐标线的宽度
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '普通',
            axisLabel: {
              formatter: '{value} ',
              fontSize: 16,
              color: '#afafaf',
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff', // 左边线的颜色
                width: '3', // 坐标线的宽度
              },
            },
            nameTextStyle: {
              fontWeight: 600,
              fontSize: 16
            },
          },
          {
            type: 'value',
            name: '团体',
            fontSize: 16,
            axisLabel: {
              formatter: '{value}',
              fontSize: 12,
              color: '#afafaf',
            },
            axisLine: {
              lineStyle: {
                color: '#fff',
                width: 2 // 这里是为了突出显示加上的
              }
            },
            nameTextStyle: {
              fontWeight: 600,
              fontSize: 16
            }
          },
        ],
        series: [
          {
            name: '散客人次',
            type: 'line',
            yAxisIndex: 0,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(64,255,160,0.2)'
                }, {
                  offset: 1,
                  color: '#40ffa088'
                }])
              }
            },
            data: valueArray1
          },
          {
            name: '团体人次',
            type: 'line',
            yAxisIndex: 1,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(88,255,255,0.2)'
                }, {
                  offset: 1,
                  color: 'rgba(52,167,232,1)'
                }]),
              }
            },
            data: valueArray2
          }
        ],
      };
      if(!this.visitPersonChart) {
        this.visitPersonChart = echarts.init(document.getElementById('visitPersonChart'))
      }
      this.visitPersonChart.setOption(option1)
    },
    initVisitVehicleCharts() {
      let valueArray1 = []
      let valueArray2 = []
      let xLabels = []
      for (let i = 0; i < this.statisticsVisitVehicleIncrease.length; i++) {
        xLabels.push(this.statisticsVisitVehicleIncrease[i].label)
        valueArray1.push(this.statisticsVisitVehicleIncrease[i].normalValue)
        valueArray2.push(this.statisticsVisitVehicleIncrease[i].groupValue)
      }
      let option1 = {
        title: {
          text: '访客车辆增长情况',
          subtext: '',
          left: 'center'
        },
        legend: {
          data: ['普通', '团体']
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: 16
          },
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        xAxis: [
          {
            type: 'category',
            data: xLabels,
            axisLabel: {
              fontSize: 16,
              color: '#afafaf',
            },
            axisPointer: {
              type: 'shadow',
            },
            nameTextStyle: {
              fontWeight: 600,
              fontSize: 16
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff', // 左边线的颜色
                width: '3', // 坐标线的宽度
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '普通',
            axisLabel: {
              formatter: '{value} ',
              fontSize: 16,
              color: '#afafaf',
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff', // 左边线的颜色
                width: '3', // 坐标线的宽度
              },
            },
            nameTextStyle: {
              fontWeight: 600,
              fontSize: 16
            },
          },
          {
            type: 'value',
            name: '团体',
            fontSize: 16,
            axisLabel: {
              formatter: '{value}',
              fontSize: 12,
              color: '#afafaf',
            },
            axisLine: {
              lineStyle: {
                color: '#fff',
                width: 2 // 这里是为了突出显示加上的
              }
            },
            nameTextStyle: {
              fontWeight: 600,
              fontSize: 16
            }
          },
        ],
        series: [
          {
            name: '散客车次',
            type: 'line',
            yAxisIndex: 0,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(64,255,160,0.2)'
                }, {
                  offset: 1,
                  color: '#40ffa088'
                }])
              }
            },
            data: valueArray1
          },
          {
            name: '团体车次',
            type: 'line',
            yAxisIndex: 1,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(88,255,255,0.2)'
                }, {
                  offset: 1,
                  color: 'rgba(52,167,232,1)'
                }]),
              }
            },
            data: valueArray2
          }
        ],
      };
      if(!this.visitVehicleChart) {
        this.visitVehicleChart = echarts.init(document.getElementById('visitVehicleChart'))
      }
      this.visitVehicleChart.setOption(option1)
    },
    initTempVehicleCharts() {
      let valueArray = []
      let xLabels = []
      for (let i = 0; i < this.statisticsTempVehicleIncrease.length; i++) {
        xLabels.push(this.statisticsTempVehicleIncrease[i].label)
        valueArray.push(this.statisticsTempVehicleIncrease[i].value)
      }
      let option = {
        title: {
          text: '临时车预约数增长情况',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: 32
          },
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        xAxis: [
          {
            type: 'category',
            data: xLabels,
            axisLabel: {
              fontSize: 16,
              color: '#afafaf',
            },
            axisPointer: {
              type: 'shadow',
            },
            nameTextStyle: {
              fontWeight: 600,
              fontSize: 16
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff', // 左边线的颜色
                width: '3', // 坐标线的宽度
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value} ',
              fontSize: 16,
              color: '#afafaf',
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff', // 左边线的颜色
                width: '3', // 坐标线的宽度
              },
            },
            nameTextStyle: {
              fontWeight: 600,
              fontSize: 16
            },
          }
        ],
        series: [
          {
            name: '数量',
            type: 'line',
            yAxisIndex: 0,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(64,255,160,0.2)'
                }, {
                  offset: 1,
                  color: '#40ffa088'
                }])
              }
            },
            data: valueArray
          }
        ],
      };
      if (!this.tempVehicleChart) {
        this.tempVehicleChart  = echarts.init(document.getElementById('tempVehicleChart'));
      }
      this.tempVehicleChart.setOption(option);
    },
    getVehicleStatistics() {
      this.loading = true
      vehicleStatistics().then(response => {
        if (response.code === 200) {
          this.vehicleStatisticsData = response.data
        } else {
          this.$message.error(response.msg)
        }
        this.loading = false
      })
    },
    getVistorStatistics() {
      this.loading = true
      visitorStatistics().then(response => {
        if (response.code === 200) {
          this.visitorStatisticsData = response.data
        } else {
          this.$message.error(response.msg)
        }
        this.loading = false
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      font-size: 48px;
      color: #40c9c6;
    }

    .icon-message {
      font-size: 48px;
      color: #36a3f7;
    }

    .icon-money {
      font-size: 48px;
      color: #f4516c;
    }

    .icon-shopping {
      font-size: 48px;
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out
}

@keyframes octocat-wave {
  0%,
  100% {
    transform: rotate(0)
  }
  20%,
  60% {
    transform: rotate(-25deg)
  }
  40%,
  80% {
    transform: rotate(10deg)
  }
}

@media (max-width:500px) {
  .github-corner:hover .octo-arm {
    animation: none
  }
  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out
  }
}

@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
